/**
 * @author wengJingMin
 * @description 腾讯地图封装
 * locationService
 * @param mapId 地图需要挂在的Dom节点
 * @param mapCanter 地图中心点
 * @param zoomSize 地图缩放级别
 */

class TencentMap {

    constructor(mapId, mapCanter, zoomSize, hasDark) {
        // 地图dom
        this.mapId = mapId
            // 腾讯地图实例
        this.map = null
            // 地图中心点
        this.mapCanter = mapCanter
            // 地图缩放级别
        this.zoomSize = zoomSize
            // 腾讯地图函数
        this.TMap = window.TMap;
        // 地图标记点实例
        this.marker = null
            // 初始化标记点数组
        this.markerList = []
            // 地图折线实例子
        this.polylineLayer = null
            // 标记点修改完之后存储回调函数
        this.callBackMapping = {}

        this.hasDark = hasDark
    }


    static instance = null
    static get Instance() {
        if (!this.instance) {
            this.instance = new TencentMap()
        }
        return this.instance
    }

    // 回调函数的注册
    registerCallBack = (callBack) => {
        this.callBackMapping = callBack
    }

    /**
     * 地图挂载在dom节点上
     */
    initDomMap = () => {
        console.log(document.getElementById('id'))

        var map = new this.TMap.Map(document.getElementById(this.mapId), {
            center: new this.TMap.LatLng(this.mapCanter[0], this.mapCanter[1]), //地图显示中心点
            zoom: this.zoomSize, //缩放级别
            mapStyleId: this.hasDark ? 'style1' : 'Style2'
        });
        this.map = map;
        // 去除缩小放大控件
        this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
        this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
    }


    /**
     * 初始化点标记
     * @param markerList 初始化点数组
     */
    initMarker = (markerList = []) => {
        console.log('初始化点数组')
        let geometries = []
            // const url = require("@/assets/images/map_start.png");
        if (markerList && markerList.length !== 0) {
            markerList.forEach(item => {
                let param = {
                    id: new Date().getTime(),
                    styleId: 'marker',
                    position: new this.TMap.LatLng(item.position[0], item.position[1]),
                    content: item.siteName,
                    direction: "top",
                }
                geometries.push(param)
                this.markerList.push(param)
            })
        }
        this.marker = new this.TMap.MultiMarker({
            id: 'marker-layer',
            map: this.map,
            styles: {
                "marker": new this.TMap.MarkerStyle({
                    "width": 30,
                    "height": 35,
                    "anchor": { x: 16, y: 32 }, // 图标位置
                    size: 12,
                    offset: { x: 0, y: -25 }, // 图标文字偏移量
                    highlight: new this.TMap.MarkerStyle({
                        "src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png"
                    }),
                    "src": url
                })
            },
            geometries: geometries
        });
        // 回调函数将已经添加的站点返回
        if (this.callBackMapping) {
            this.callBackMapping.call(this, this.markerList)
        }

    }



    //监听点击事件添加marker
    addClick = (param) => {
        console.log(param)
        let addParam = {
            position: new this.TMap.LatLng(param.position[0], param.position[1]),
            id: new Date().getTime(),
            styleId: 'marker',
            content: param.siteName,
            direction: "top",
        }
        this.markerList.push(addParam)
        this.marker.add(addParam)
            // 回调函数将已经添加的站点返回
        if (this.callBackMapping) {
            this.callBackMapping.call(this, this.markerList)
        }


    }

    /**
     * 删除标记点
     * 接受一个数组
     * @param markerId [] 需要删除的点id 
     */
    removeMarker = (index) => {
        console.log(this.markerList[index])
        this.marker.remove(this.markerList[index].id)
        this.markerList.splice(index, 1);
    }

    /**
     * 修改点标记
     * 以点标记唯一标识id为依据，
     * 如果geometry的id存在于多点标注的集合中，
     * 会更新对id的数据，如果之前不存在于集合中，会作为新的点标注添加到集合中；
     * @param param[] 需要更新的点数组 支持多个点同时更新
     */
    updateMarker(param, index) {
            console.log(this.markerList[index])
            console.log(param)
            this.markerList[index].position = new this.TMap.LatLng(param.position[0], param.position[1])
            this.markerList[index].content = param.siteName

            this.marker.updateGeometries(this.markerList[index])
        }
        /**
         * 根据选中的点进行划线
         */
    initDrawLine() {
        let drawPoints = this.markerList.map(item => {
            return item.position
        })

        // 判断是否实例化折线 折线为null 则新增 否则就更新
        if (this.polylineLayer === null) {
            this.polylineLayer = new this.TMap.MultiPolyline({
                id: "polyline-layer", //图层唯一标识
                map: this.map, //设置折线图层显示到哪个地图实例中
                //折线样式定义
                styles: {
                    style_blue: new window.TMap.PolylineStyle({
                        color: "#3777FF", //线填充色
                        width: 6, //折线宽度
                        borderWidth: 5, //边线宽度
                        borderColor: "#FFF", //边线颜色
                        lineCap: "round", //线端头方式
                        showArrow: true
                    })
                },
                geometries: [{
                    //第1条线
                    id: "pl_1", //折线唯一标识，删除时使用
                    styleId: "style_blue", //绑定样式名
                    paths: drawPoints
                }]
            });
        } else {
            // 更新折线
            this.polylineLayer.updateGeometries([{ //第1条线
                id: 'pl_1', //折线唯一标识，删除时使用
                styleId: 'style_blue', //绑定样式名
                paths: drawPoints
            }, ])
        }
    }


    // 重置地图        
    resetMap = () => {
        // 清空点
        if (this.marker !== null) {
            this.marker.setGeometries([])
            if (this.callBackMapping) {
                this.markerList = []
                this.callBackMapping.call(this, this.markerList)
            }
        }
        // 清空折线
        if (this.polylineLayer !== null) {
            this.polylineLayer.remove("pl_1")
        }
    }


}


export default TencentMap